<div x-data="{ open: @entangle('showModal').defer }">

    <!-- Modal Backdrop -->
    <div
        x-show="open"
        x-cloak
        class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
    >
        <!-- Modal Box -->
        <div
            x-show="open"
            @click.away="open = false"
            class="bg-white p-6 rounded-xl w-full max-w-md shadow-lg transition"
        >
            <h2 class="text-xl font-bold mb-4">Livewire Modal</h2>

            <p class="mb-4">This is a modal built with Livewire + Alpine.js inside Filament.</p>

            <div class="flex justify-end">
                <button
                    @click="open = false"
                    class="px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700"
                >
                    Close
                </button>
            </div>
        </div>
    </div>
</div>
